import styled from "@emotion/styled"
import { motion } from "motion/react"

const ProgressContainer = styled.div`
    width: 272rem;
    height: 4rem;
    /* background-color: rgba(238, 238, 238, 0.8); */
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    margin-left: 12rem;

    backdrop-filter: blur(8px);
`

interface progress {
    progress: number
}

const ProgressBar = styled(motion.div)<progress>`
    height: 100%;
    background-color: #ffffff;
    border-radius: 2rem;
    position: relative;
    z-index: 1;
`

export default function Progress({ progress }: progress) {
    return (
        <ProgressContainer>
            <ProgressBar
                initial={{ width: 0 }} // 初始宽度为 0
                animate={{ width: `${progress}%` }} // 动画到目标进度
                transition={{ duration: 2, ease: "easeOut" }}
                progress={0}
            ></ProgressBar>
        </ProgressContainer>
    )
}
